<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- npm i @amap/amap-jsapi-loader --save -->
  <div class="box">
   <h2>
    <img src="@/assets/components/芜湖.png" alt="">
   <span>地产详情</span>
   </h2>
    <div class="dcxq">
      <el-row type="flex">
        <div class="left">
            <h3>{{xxdata.title}}</h3>
            <img :src="xxdata.image" v-imgErr="require('@/assets/components/555.jpg')" alt="生不出图来" />
        </div>
        <div class="right">
          <div class="right-top">
            <img v-for="(v,i) in xxdata.photos&&xxdata.photos.length!==0?xxdata.photos:4" v-imgErr="require('@/assets/components/444.jpg')" :key="i" :src="v" alt="">
            <p>{{xxdata.price}}元</p>
          </div>
          <div class="right-bottom">
            <el-card class="map-image" id="container"></el-card>
          </div>
        </div>
      </el-row>
    </div>
    <div class="textbox">
      <p>{{xxdata.desc}}</p>
    </div>

  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {

  data () {
    return {
      formData: [],
      map: null,
      xxdata: {}
    }
  },
  created () {
    this.initMap()
    this.xxdata = JSON.parse(localStorage.getItem('xxdata')) || this.$store.state.xxdata
    // console.log(this.xxdata.photos[0])
  },
  methods: {
    // 高德地图
    initMap () {
      AMapLoader.load({
        key: 'd28594269a922c896a1fb27527dac366', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom: 11, // 初始化地图层级
            center: [116.397428, 39.90923] // 初始化地图中心点
          })
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 62.5vw;
  margin: 0 auto;
   h2{
      margin: 20px 0;
      line-height: 30px;
      color: orange;
      text-align: left;
      display: flex;
      img{
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
    }
.dcxq{
  border: 1px solid #ece9ed;
  border-bottom: 0px;;
  padding: 15px 0;
  .left {
    width: 70%;
    line-height: normal;
    text-align: left;
    h3{
      margin: 0;
    }
    img{
      width: 100%;
      height: 26.27430vw;
      vertical-align: middle;
    }
  }
  .right{
    flex: 1;
    padding: 30px 30px 0;
    width: 30%;
    // background-color: red;
    display: flex;
    flex-direction: column;
    .right-top{
      flex: 1;
      line-height: normal;
      font-size: 20px;
      font-weight: 700;
      color: orange;
      // margin-bottom: 30px;
      img:nth-child(2n-1){
        margin-right: 1.036269vw;
      }
      img{
      margin-bottom: 1.036269vw;
      width: 35%;
      height: 35%;
      vertical-align: middle;
      }
    }
    .right-bottom{
      padding-top: 20px;
      height: 55%;
      .map-image{
        height: 100%;
      }
    }
  }
}
.textbox{
  border: 1px solid #ece9ed;
  padding:20px 0 ;
  line-height: normal;
  text-align: left;
  font-size: 20px;
  margin-bottom: 60px;
  p{
    display: inline-block;
    width: 100%;
    line-height: 30px;
    word-wrap: break-word;
    word-break: break-all;
  }
}
}
</style>
